<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" charset="utf-8" src="common/js/framework.js"></script>
    <script type="text/javascript" charset="utf-8" src="common/js/navbar.js"></script>
    <script type="text/javascript" charset="utf-8" src="common/js/copyright.js"></script>

    <link rel="stylesheet" href="common/css/scp.css" type="text/css"/>
    <!-- 私有 -->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="index/css/index.css" type="text/css"/>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="">
    <style>
        .item img {
            width: 100%;
            height: 500px;
        }

        .citem p {
            height: 30px;
            line-height: 30px;
        }

        .pinglun textarea {
            width: 100%;
            height: 200px;
            padding: 10px;
        }

        .content {
            padding: 10px;
        }

        /*#userNav:hover {*/
        /*    background: red;*/
        /*}*/
        .border-bottom {
            border-bottom: 2px solid deepskyblue;
        }
    </style>

</head>
<body>
<div id="navBarId" class="head">
</div>
<div class="layui-container" id="app">
    <hr>
    <div>
        <span class="layui-breadcrumb">
            <div><span class="layui-breadcrumb" style="visibility: visible;"><a href="/dongtai">个人动态</a><span
                    lay-separator="">/</span> <a><cite>详情</cite></a></span></div>
        </span>
    </div>
    <hr>
    <div class="layui-row" id="contentArea">
        <div class="item">
            <img :src="getUrl(detail.img)" alt="">
            <div class="content" v-html="detail.detail">
                {{detail.detail}}
            </div>
            <hr>
            <div style="padding: 5px 5px;display: flex;">
                <p style="width: 50%;height: 20px;line-height: 20px;padding-left: 20px;">
                    点赞数量&nbsp;&nbsp;{{detail.totalPrimary}}</p>
                <p style="width: 50%;height:20px;line-height: 20px;text-align: right;padding-right: 20px;">
                    评论数量&nbsp;&nbsp;{{detail.totalComment}}</p>
            </div>
        </div>
        <hr>
        <p style="text-align: center;">评论列表</p>
        <hr>
        <div class="comment">
            <div class="citem" v-for="(item,index) in commentList" :key="index">
                <p style="font-weight: bold;">
                    {{item.username}}发布于 {{item.createtime}}
                    <input type="hidden" value="">
                    <i class="fa fa-commenting-o" style="float: right;margin-right: 16px;"  @click="openInput(index)"></i>
                    <i class="fa fa-close" style="float: right;margin-right: 16px;"  @click="deleteDT(item.id)"></i>
                </p>
                <p style="height: auto;">{{item.content}}</p>
                <div  class="pinglun" style="display:none" style="margin-bottom: 20px;">
                    <textarea :id="content(index)" placeholder="在此输入你的评论内容"></textarea>
                    <p style="text-align: center;">
                        <button class="layui-btn layui-btn-xs layui-btn-danger" @click="reply(index,item.id)">回复</button>
                        <button class="layui-btn layui-btn-xs layui-btn-warm" @click="closeInput(index)">取消</button>
                    </p>
                </div>
                <div class="citem" style="padding-left: 20px;background-color: #eaeaec;border-top:1px solid #d9d9d9;" v-for="(child,index2) in item.childList" :key="index">
                    <p style="font-weight: bold;">
                        {{child.username}}发布于 {{child.createtime}}
                        <i class="fa fa-close" style="float: right;margin-right: 16px;"  @click="deleteDT(item.id)"></i>
                    </p>
                    <p style="height: auto;">{{child.content}}</p>
                </div>
                <hr>
            </div>
        </div>
    </div>
</div>
<div id="navbottomBarId"></div>
<script type="text/javascript" charset="utf-8" src="index/js/index.js"></script>
<script>
    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            , width: '100%' //设置容器宽度
            , height: '1200px'
            , arrow: 'always' //始终显示箭头
            , autoplay: true
            , arrow: 'hover'
        });
    });
    let param = album.getQueryString()
    new Vue({
        el: '#app',
        data: {
            detail: null,
            commentList: []
        },
        created: function () {
            this.init();
        },
        methods: {
            init: function () {
                let _this = this
                $.get("/news/detail2", {id: param.id}, function (res) {
                    console.log(res)
                    _this.detail = res.detail
                    _this.commentList = res.comment
                })
            },
            getUrl: function (url) {
                return "/" + url
            },
            reply(index,id) {
                // $.ajax({
                //     url: "/user/checkuserlogininfo",
                //     dataType: "json",
                //     async: false,
                //     type: "POST",
                //     success: function (result) {
                //         if (result.success) {
                //
                //         } else {
                //             layer.msg("请登录!")
                //             localStorage.setItem("result", JSON.stringify(result));
                //             window.location.href = "/user/userLogin.html"
                //         }
                //     },
                //     error: function (result) {
                //         //alert("系统繁忙!");
                //     }
                // });


                let _this = this
                let content = $("#content"+index).val()
                if (!content) {
                    layer.msg("请填写回复内容", {icon: 2})
                    return
                }
                $.get("/news/reply", {
                    parentId:id,
                    content: content
                }, function (res) {
                    layer.msg("回复评论成功!", {icon: 1})
                    window.location.reload();
                })
            },
            dianzan() {
                let _this = this
                $.get("/news/dianzan", {
                    newsid: param.id
                }, function (res) {
                    layer.msg("点赞成功!", {icon: 1})
                    _this.init()
                })
            },
            deleteDT(id){
                layer.msg(id, {icon: 1})
                $.ajax({
                    url: "/news/deleteComment/"+id,
                    dataType: "json",
                    type: "POST",
                    success: function (result) {
                        layer.msg("删除成功!", {icon: 1})
                        window.location.reload();
                    },
                    error: function (result) {
                        layer.msg("系统繁忙!")
                    }
                });
            },
            content(index){
                return "content"+index;
            },
            openInput(index){
                $.ajax({
                    url: "/user/checkuserlogininfo",
                    dataType: "json",
                    type: "POST",
                    async: false,
                    success: function (result) {
                        console.log("result:::"+result)
                        if (result.success) {
                            $("#content"+index).parent().show();
                        } else {
                            layer.msg("请登录!")
                            localStorage.setItem("result", JSON.stringify(result));
                            window.location.href = "/user/userLogin.html"
                        }
                    }
                });
            },
            closeInput(index){
                $("#content"+index).val("")
                $("#content"+index).parent().hide();
            }
        }
    })
    //删除动态
</script>
</body>
</html>